<template>
  <div class="container">
    <div class="fs20">
      <router-link to="/songList">{{ title }}</router-link>
    </div>
    <div class="tab" v-if="minlist">
      <a href="#">华语</a>
      <span>|</span>
      <a href="#">流行</a>
      <span>|</span>
      <a href="#">摇滚</a>
      <span>|</span>
      <a href="#">民谣</a>
      <span>|</span>
      <a href="#">电子</a>
    </div>
    <span class="more">
      <a href="#">更多</a>
      <i></i>
    </span>
  </div>
</template>

<script>
export default {
  name: 'Title',
  data() {
    return {
      result: []
    }
  },
  props: ['title', 'minlist'],
  created() {
    this.getPersonalized()
  },
  methods: {
    async getPersonalized() {
      const { data: res } = await this.$http.get('/personalized?limit=8')
      this.result = res.result
      console.log(this.result)
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
  display: flex;
  width: 689px;
  height: 35px;
  border-bottom: 2px solid #c10d0c;
  box-sizing: border-box;
  padding: 0 10px 0 34px;
  background: url('https://s2.music.126.net/style/web2/img/index/index.png?f08f96ed07befc7a00adfd0c8cabaf5f') no-repeat;
  background-position: -225px -156px;
}

.container {
  font-weight: normal;
  line-height: 28px;
  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
}
.tab {
  margin-left: 20px;
}
.tab span {
  margin: 0 10px;
  color: #ccc;
}
.more {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}
.more i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  background: url(https://s2.music.126.net/style/web2/img/index/index.png?5e09722e9fbdde4e9174d3dbaf6141bd) no-repeat 0 -240px;
}
</style>
